<%@ include file="/common/taglibs.jsp"%>

<head>
    <title><fmt:message key="vesselList.title"/></title>
    <meta name="heading" content="<fmt:message key='vesselList.heading'/>"/>
    <meta name="menu" content="VesselListMenu"/>
    <script type="text/javascript" src="<c:url value='/scripts/jquery/ui/jquery.ui.button.js'/>"></script>
    <script type="text/javascript" src="<c:url value='/scripts/jquery/ui/jquery.ui.datepicker.js'/>"></script>
    <style>
		#toolbar {
			padding: 10px 5px;
		}
		#toolbar2 {
			padding: 10px 5px;
		}
	</style>
</head>



<span id="toolbar" class="ui-widget-header ui-corner-all">
	<button type="button" style="margin-right: 5px" id="addVessel"
        onclick="location.href='<c:url value="/admin/vesselForm.html?method=Add&from=list"/>'">
        <fmt:message key="button.add" />
    </button>

    <button type="button" id="doneVessel" onclick="location.href='<c:url value="/mainMenu.html"/>'">
        <fmt:message key="button.done" />
    </button>
</span>

<div class="clear"></div>

<div class="buttons" style="float:left;padding-right:15px;margin-top: 20px;">
	<form:form commandName="vesselSearch" method="post" action="vesselList.html">
		<fieldset class="ui-widget ui-widget-content" style="width: 125%;">
			<legend class="ui-widget-header ui-corner-all">
				<fmt:message key="vessel.searchForm" />
			</legend>
			<table>
				<tr>
					<td><appfuse:label styleClass="desc" key="vessel.txtSearch"/></td>
					<td><form:input path="name" class="text ui-widget-content ui-corner-all"/></td>
				</tr>
				<tr>			
					<td><appfuse:label styleClass="desc" key="countryList.title"/></td>
					<td>
						<c:choose>
				    		<c:when test="${vesselSearch.country != null && vesselSearch.country.id > 0}">
								<form:select path="country.id" items="${countryList}" itemLabel="name" itemValue="id" class="select ui-widget-content ui-corner-all"/>
				    		</c:when>
				    		<c:otherwise>
								<form:select path="country" items="${countryList}" itemLabel="name" itemValue="id" class="select ui-widget-content ui-corner-all" />
				    		</c:otherwise>
				    	</c:choose>
			    	</td>
				</tr>
			</table>
			
			<button type="button" class="negative" id="searchForm_button_reset"  onclick="resetFields();">
				<fmt:message key="button.reset" />
			</button>
			<button type="submit" class="searchb" id="searchForm_button_search" name="search">
				<fmt:message key="button.search" />
			</button>
			
		</fieldset>
	</form:form>
</div>

<div class="clear"></div>

<display:table name="vesselList" cellspacing="0" cellpadding="0" defaultsort="1" id="vesselData" pagesize="2" class="table" export="true" style="width: 125%;">
    <display:column property="code" sortable="true" escapeXml="true" titleKey="vesselFormData.code" style="width: 25%" 
    url="/admin/vesselForm.html?from=list" paramId="id" paramProperty="id"/>
	<display:column property="name" sortable="true" titleKey="vesselFormData.name" style="width: 35%"/>
	<display:column property="country.name" sortable="true" titleKey="countryList.title" style="width: 20%"/>
	<display:column property="age" sortable="true" titleKey="vesselFormData.age" style="width: 7%"/>
	<display:column property="weight" sortable="true" titleKey="vesselFormData.weight" style="width: 15%"/>
    
    <display:setProperty name="paging.banner.item_name" value="vesselData"/>
    <display:setProperty name="paging.banner.items_name" value="vesselList"/>

    <display:setProperty name="export.excel.filename" value="Vessel List.xls"/>
    <display:setProperty name="export.csv.filename" value="Vessel List.csv"/>
    <display:setProperty name="export.pdf.filename" value="Vessel List.pdf"/>
</display:table>

<span id="toolbar2" class="ui-widget-header ui-corner-all">
	<button type="button" style="margin-right: 5px" id="addVessel2"
        onclick="location.href='<c:url value="/admin/vesselForm.html?method=Add&from=list"/>'">
        <fmt:message key="button.add" />
    </button>

    <button type="button" id="doneVessel2" onclick="location.href='<c:url value="/mainMenu.html"/>'">
        <fmt:message key="button.done" />
    </button>
</span>


<script type="text/javascript">
	$(function() {
		$("#doneVessel" ).button({
            icons: {
                primary: "ui-icon-home"
            }
        });
		
		$("#addVessel" ).button({
            icons: {
                primary: "ui-icon-circle-plus"
            }
        });
		
		$("#doneVessel2" ).button({
            icons: {
                primary: "ui-icon-home"
            }
        });
		
		$("#addVessel2" ).button({
            icons: {
                primary: "ui-icon-circle-plus"
            }
        });
		
		$("#searchForm_button_reset" ).button({
            icons: {
                primary: "ui-icon-trash"
            }
        });
		
		$("#searchForm_button_search" ).button({
            icons: {
                primary: "ui-icon-circle-zoomin"
            }
        });
	});
	 highlightTableRows("vesselData");
</script>